{extend name="public/base"/}
{block name="body"}
<header class="mui-bar mui-bar-nav">
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  <h1 class="mui-title">我的订单</h1>
</header>
<div class="mui-content">
  <div style="padding: 10px 10px;">
    <div id="segmentedControl" class="mui-segmented-control">
      <a class="mui-control-item mui-active" href="#item1">
        待付款
      </a>
      <a class="mui-control-item" href="#item2">
        已办公文
      </a>
      <a class="mui-control-item" href="#item3">
        全部公文
      </a>
    </div>
  </div>
  <div>
    <div id="item1" class="mui-control-content mui-active">
      <div id="scroll" class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell">
              第一个选项卡子项-1
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="item2" class="mui-control-content">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          第二个选项卡子项-1
        </li>
        <li class="mui-table-view-cell">
          第二个选项卡子项-2
        </li>
        <li class="mui-table-view-cell">
          第二个选项卡子项-3
        </li>
      </ul>
    </div>
    <div id="item3" class="mui-control-content">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          第三个选项卡子项-1
        </li>
        <li class="mui-table-view-cell">
          第三个选项卡子项-2
        </li>
        <li class="mui-table-view-cell">
          第三个选项卡子项-3
        </li>
      </ul>
    </div>
  </div>
</div>
{/block}
{block name="script"}
<script>
  mui.init({
    swipeBack:true //启用右滑关闭功能
  });
  $('#scroll').height($(window).height()-44)
</script>
{/block}
